<template>
  <div class="userList">
    <list-options @search="search" ref="listOptions"/>
    <list-table @search="search" :loading="loading" :data="data"/>
    <div class="demonstration-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageParams.size"
        layout="total, prev, pager, next"
        :total="pageParams.totalCount"
      ></el-pagination>
     </div>
  </div>
</template>

<script>
import ListOptions from './controls/listOptions'
import ListTable from './controls/listTable'
import queryString from "querystring"
import page from 'data/page'
let defaultStatus = [
  {code: 0, name:'正常'},
  {code: 1, name:'中止'},
  {code: 2, name:'终止'},
  {code: 3, name:'失效'},
]
export default {
  name: 'userList',
  mixins: [page],
  data() {
    return {
      data:[], //table数据
      currentPage: 1,
      loading: false
    }
  },
  components: {
    ListOptions,
    ListTable
  },
  mounted(){
    this.search();
  },
  methods:{
    search(){  //搜索
      this.loading = true;
      const optionParams = this.$refs.listOptions.getData();
      const tableParams = {
        page: this.currentPage - 1,
        size: 20
      };
      let params = this.lodash.assign({}, optionParams, tableParams);
      const param = queryString.stringify(params || {});
      this.api.get(`/customer?${param}`).then((res)=>{
        this.loading = false;
        if(!res.data) return;
        this.data = res.data.list;
        this.setPage(res.data)
        this.dataInit();
      }).catch((err) => {
        console.log(err)
        this.$message(err.message)
      })
    },
    dataInit(){ //数据初始化
      this.data.map((item) => {
        item.address = item.address || item.provinceValue + item.cityValue + item.countryValue;
        item.statusName = '';
        defaultStatus.map(obj => {
          if(obj.code === item.status){
            item.statusName = obj.name;
          }
        })
        return item;
      })
    }
  },
  watch: {
    currentPage() {
      this.search()
    }
  }
}
</script>
 
<style lang="less" scoped>

</style>
 